<template>
	<view class="user-order">
		<view class="user-order-nav flex-center-around" >
			<view
				:class="navActived === item.id ? 'nav nav-actived' : 'nav'"
				v-for="item in navList"
				:key="item.id"
				@click="toggleNav(item.id)">
				{{item.name}}
			</view>
		</view>
		<view class="user-order-list">
			<view
				v-if="orderList.length"
				class="user-order-list-item"
				v-for="(item,index) in orderList"
				:key="index"
				@click="pageTo('orderDetail?orderId=' + item.order_no)">
				<view class="user-order-list-item-top flex-center-between">
					<view class="number">订单号：{{item.order_no}}</view>
					<view
						v-if="item.pay_way !== 6"
						class="status"
						:class="'status-' + item.status">
						{{item.status === 6 ? '退款中': 
						item.status === 7 ? '拒绝退款' : 
						item.status === 8 ? '已退款' : 
						item.status === 9 ? '已失效': 
						item.status === 10 ? '已验收' : 
						navList[item.status].name}}
					</view>
					<view
						v-if="item.pay_way === 6"
						class="status">
						试租
					</view>
				</view>
				<view
					class="user-order-list-item-main flex-center-between"
					v-for="(item2, index2) in item.items"
					:key="index2">
					<image
						class="user-order-list-item-main-img"
						:src="item2.image"
						mode="aspectFill">
					</image>
					<view class="user-order-list-item-main-right">
						<view class="name-price-amount flex-center-between">
							<view class="name text-overflow-two">{{item2.name}}</view>
							<view>
								<view class="price">¥{{item2.unit_price}}</view>
								<view class="amount">x{{item2.count}}</view>
							</view>
						</view>
						<view class="type">类别:{{item2.spec_name}}</view>
						<view class="daterange">下单时间:{{item.create_time}}</view>
					</view>
				</view>
				<view class="user-order-list-item-bottom">
					<view v-if="item.pay_way !== 6">
						<text class="coupon-price">优惠：¥{{item.coupon_price}}</text>
						<text>
							<text>合计：</text>
							<text class="color-important">¥{{item.total}}</text>
						</text>
					</view>
					<!--  #ifndef  MP-WEIXIN -->
					<!--  #endif -->
					<view v-if="item.status === 1">
						<!-- <text v-if="!item.invoice_id" class="btn" @click.stop="pageTo('/pages/index/invoice?order_no='+item.order_no)">开发票</text> -->
						<text class="btn" @click.stop="cancelOrder(item.order_no)">取消订单</text>
						<text
							v-if="item.pay_way !== 6"
							class="btn color-important"
							@click.stop="pageTo('/pages/index/pay?orderNum='+item.order_no+'&orderMoney='+item.total+'&payWay='+item.pay_way+'&couponMoney='+item.coupon_price)">付款
						</text>
					</view>
					<view v-if="item.status === 2 && item.pay_way !== 6">
						<text v-if="!item.invoice_id" class="btn" @click.stop="pageTo('/pages/index/invoice?order_no='+item.order_no)">开发票</text>
						<text class="btn color-important" @click.stop="pageTo('/pages/user/userApplyRefund?orderNum='+ item.order_no)">申请退款</text>
					</view>
					<view v-if="item.status === 3">
						<text v-if="!item.invoice_id && item.pay_way !== 6" class="btn" @click.stop="pageTo('/pages/index/invoice?order_no='+item.order_no)">开发票</text>
						<text v-if="item.pay_way !== 6" class="btn color-important" @click.stop="pageTo('/pages/user/userApplyRefund?orderNum='+ item.order_no)">申请退款</text>
						<text class="btn" @click.stop="confirmOrder(item.order_no)">确认收货</text>
					</view>
					<view v-if="item.status === 4 || item.status === 5 || item.status === 10">
						<text v-if="!item.invoice_id && item.pay_way !== 6" class="btn" @click.stop="pageTo('/pages/index/invoice?order_no='+item.order_no)">开发票</text>
						<text v-if="item.pay_way !== 6" class="btn color-important" @click.stop="pageTo('/pages/user/userApplyRefund?orderNum='+ item.order_no)">申请退款</text>
						<text v-if="item.status !== 10" class="btn" @click.stop="checkOrderModal(item.order_no)">验收</text>
					</view>
					
				</view>
			</view>
			<view v-if="!orderList.length && loadStatus !== 'loading'" class="no-data">
				<image class="no-data-img" src="../../static/images/no-data.png" mode="aspectFit"></image>
				无订单数据
			</view>
			<uni-load-more v-if="orderList.length > pageSize" :status="loadStatus"></uni-load-more>
		</view>
	</view>
	
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue"
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				navActived: 0,
				navList: [
					{
						name: '全部',
						id: 0,
					},
					{
						name: '待付款',
						id: 1,
					},
					{
						name: '待发货',
						id: 2,
					},
					{
						name: '待收货',
						id: 3,
					},
					{
						name: '已完成',
						id: 5,
					},
					{
						name: '退款',
						id: 6,
					}
				],
				orderList: [],
				loadStatus: 'loading', //more：加载更多，noMore：没有更多数据，loading：加载中
				curPage: 1,
				pageSize: 6,
			}
		},
		onReachBottom() {
			// 下拉加载更多
			console.log('下拉加载更多')
			if (this.loadStatus === 'noMore') return
			this.gatOrderList()
		},
		onLoad(option) {
			this.navActived = Number(option.active) || 0
		},
		onShow(){
			console.log('onShow')
			this.gatOrderList(1)
		},
		methods: {
			/**
			 * 获取订单列表数据
			 */
			async gatOrderList(num) {
				this.loadStatus = 'loading'
				num && (this.orderList = [])
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/list',
					data: {
						page: num || this.curPage++,
						row: this.pageSize,
						status: this.navActived,
					}
				})
				if (res.status === 1) {
					let list = res.data.list.map(item => {
						item.items.map(item2 => {
							item2.image = this.$baseUrl + item2.image
							return item2
						})
						return item
					})
					this.orderList.push(...list)
					if (res.data.list.length < this.pageSize) {
						this.loadStatus = 'noMore'
						return
					}
					this.loadStatus = 'more'
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 取消订单
			 * @param {String} order_num
			 */
			async cancel(order_num) {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/cancel',
					data: { order_no: order_num }
				})
				if (res.status === 1) {
					this.gatOrderList(1)
					uni.showToast({
						title: '取消成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 确认收货
			 * @param {String} order_no
			 */
			async confirmGetGoods(order_no) {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/finish',
					data: { order_no: order_no }
				})
				if (res.status === 1) {
					this.navActived = 5
					this.gatOrderList(1)
					uni.showToast({
						title: '已确认收货',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 验收
			 * @param {String} order_no
			 */
			async checkOrder(order_no) {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/finish_check',
					data: { order_no: order_no }
				})
				if (res.status === 1) {
					this.navActived = 5
					this.gatOrderList(1)
					uni.showToast({
						title: '已验收',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 确认收货弹框
			 * @param {String} order_num
			 */
			confirmOrder(order_num) {
				uni.showModal({
					title: '提示',
					content: '确定收货？',
					success: (res) => {
						if (res.confirm) {
							this.confirmGetGoods(order_num)
						}
					}
				});
			},
			/**
			 * 取消订单
			 * @param {String} order_num
			 */
			cancelOrder(order_num) {
				uni.showModal({
					title: '提示',
					content: '确定取消订单？',
					success: (res) => {
						if (res.confirm) {
							this.cancel(order_num)
						}
					}
				});
			},
			/**
			 * 验收订单
			 * @param {String} order_num
			 */
			checkOrderModal(order_num) {
				uni.showModal({
					title: '提示',
					content: '确定验收订单？',
					success: (res) => {
						if (res.confirm) {
							this.checkOrder(order_num)
						}
					}
				});
			},
			/**
			 * 切换订单状态
			 * @param {Number} id
			 */
			toggleNav(id) {
				// console.log(id)
				this.navActived = id
				this.curPage = 1
				this.orderList = []
				this.gatOrderList(1)
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
			
		}
	}
</script>

<style lang="scss">
	.user-order{
		padding-top: 90rpx;
		.user-order-nav{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9;
			height: 90rpx;
			line-height: 90rpx;
			background: $uni-bg-color;
			border-bottom: 1rpx solid $uni-border-color;
			.nav{
				width: 150rpx;
				text-align: center;
			}
			.nav-actived{
				color: $uni-color-theme;
				border-bottom: 2rpx solid $uni-color-theme;
				animation: toggleNav 0.3s ease;
			}
		}
		.user-order-list{
			padding: 0 30rpx 30rpx;
			.user-order-list-item{
				box-sizing: border-box;
				margin-top: 30rpx;
				padding: 30rpx;
				background: $uni-bg-color;
				border-radius: $uni-border-radius-base;
				.user-order-list-item-top{
					.number{
						font-size: $uni-font-size-sm2;
						border-radius: $uni-border-radius-base;
					}
					.status{
						line-height: 36rpx;
						padding: 0 10rpx;
						color: $uni-text-color-inverse;
						font-size: $uni-font-size-sm1;
						background: #ccc;
					}
					.status-1,
					.status-2,
					.status-3{
						background: #ff9c00;
					}
					.status-4,.status-5{
						background: #00b5c4;
					}
					.status-6{
						background: #FED800;
					}
					.status-7{
						background: #F76260;
					}
					.status-8{
						background: #2FCB5F;
					}
					.status-10{
						background: #00b5c4;
					}
				}
				.user-order-list-item-main{
					margin: 20rpx 0;
					padding: 30rpx 0;
					border-top: 1rpx solid $uni-border-color;
					&-img{
						width: 200rpx;
						height: 200rpx;
					}
					&-right{
						width: 400rpx;
						.name-price-amount{
							margin-bottom: 30rpx;
							.name{
								width: 300rpx;
								line-height: 1.2;
								height: 74rpx;
							}
							.price, .amount{
								font-size: $uni-font-size-sm2;
								color: $uni-text-color-grey;
								text-align: right;
							}
						}
						.type, .daterange{
							font-size: $uni-font-size-sm1;
						}
					}
				}
				.user-order-list-item-bottom{
					text-align: right;
					.coupon-price{
						margin-right: 30rpx;
					}
					.goods-undefind{
						font-size: $uni-font-size-sm2;
						margin-right: 30rpx;
					}
					.service-price{
						margin-right: 54rpx;
					}
					
					.btn{
						display: inline-block;
						line-height: 56rpx;
						margin: 30rpx 0 0 20rpx;
						padding: 0 28rpx;
						border-radius: 28rpx;
						font-size: $uni-font-size-sm2;
						border: 1rpx solid $uni-border-color;
					}
				}
			}
		}
		
		@keyframes toggleNav {
			0% {
				transform: translateY(6rpx);
			}
			100% {
				transform: translateY(0%);
			}
		}
	}
</style>
